<template>
    <div class="test" @click.right="rightClick">
        <h1 @click.right.stop="h1Click">TEST</h1>

        <h2>fasdl</h2>

        <el-button>sfda</el-button>


        <right-menu v-model="menu.visible"
                    :event="menu.event"
                    :items="items"
                    @click="itemClick">
        </right-menu>
    </div>
</template>

<script type="text/ecmascript-6">
  import RightMenu from "../../components/common/RightMenu";

  /**
   * @author 白雨浓
   * @date 2018/9/21 18:11
   *
   *
   **/
  export default {
    name: 'Test',
    components: {RightMenu},
    data() {
      return {
        items: [
          'TEST1',
          'TEST2',
          'TEST3'
        ],
        menu: {
          visible: false,
          event: null,
        },
      }
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      rightClick(evt) {
        this.items = [
          'TEST1',
          'TEST2',
          'TEST3'
        ];
        this.menu = {
          visible: true,
          event: evt
        };
      },
      h1Click(evt) {
        this.items = ['h1'];
        this.menu = {
          visible: true,
          event: evt
        };
      },
      itemClick(item) {
        console.log(item);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .test {
    }
</style>
